/****************
 *@description:   概览数据  指标趋势  
 *@author: Xhd
 *@API: 高贤亮， 陈浩天
 *@date: 2023-12-27 16:49:48
 *@version: V1.0.0
*************************************************************************/

import React from "react";
import { Button, DatePicker } from 'antd';
import { apiGetGiftDataBoard, apiGetLineCharQuery } from "@/request/dataPanel";
import '../style/style.less';
import '@/font/iconfont.css';
import moment from 'moment';
import Card from "./card.jsx";
import OnlineIncome from '@/views/dataBoard/components/IsOnlineIncomenew.jsx';
import _ from 'lodash';

class Index extends React.Component {
  state = {
    dataSource: [],
    defaultValueTime: null,
    dateType: "1",
    selectVal: "all",
    selected: {},
    beginTime: moment().subtract(1, 'days').format('yyyy-MM-DD'),
    endTime: moment().subtract(1, 'days').format('yyyy-MM-DD'),
    time: '',
    chartData: {
      eventTrendList: [],
      dateList: []
    }
  }
  charts = React.createRef()
  async componentDidMount() {
    await this.getData();
    await this.getChartData();
    this.setState({
      time: moment().subtract(1, 'days').format('yyyy-MM-DD'),
    })
  }

  getData = async () => {
    let res = await apiGetGiftDataBoard({ "type": this.state.dateType, "startTime": this.state.beginTime, "endTime": this.state.endTime })
    let UnitDispose = (data) => {
      if (!!data) {
        if (data > 1000000) {
          return data > 100000000 ? (data / 100000000).toFixed(2) + "亿" : data
        } else {
          return (data > 10000 ? (data / 10000).toFixed(2) + "万" : data || 0)
        }
      } else {
        return 0
      }
    };
    if (res.code === 0) {
      let data = res.data ? res.data : []
      let dataSource = [
        {
          top:
          {
            title: '充值成功金额（元）',
            value: UnitDispose((Number(data. amountSuccess) /100).toString()),
            explain: "统计周期内，宠币购买订单中支付成功的金额合计。",
            yesterday: data.amountSuccessQoq,
          },
        },
        {
          top:
          {
            title: 'Apple充值金额（元）',
            value: UnitDispose((Number(data. appleAmountSuccess) /100).toString()),
            explain: "统计周期内，宠币购买订单apple支付成功的金额合计。",
            yesterday: data.appleAmountSuccessQoq
          }

        },
        {
          top:
          {
            title: '支付宝充值（元）',
            value: UnitDispose((Number(data. aliAmountSuccess) /100).toString()),
            explain: "统计周期内，宠币购买订单中支付宝支付成功的金额合计。",
            yesterday: data.aliAmountSuccessQoq
          }
        },
        {
          top:
          {
            title: '宠币账户收入',
            value: UnitDispose((Number(data.petCoinsReceive) /10).toString()),
            explain: "统计周期内，宠币账户所有宠币收入。",
            yesterday: data.petCoinsReceiveQoq
          }
        },
        {
          top:
          {
            title: '宠币账户支出',
            value: UnitDispose((Number(data.petCoinsSend) /10).toString()),
            explain: "统计周期内，宠币账户支出项合计。",
            yesterday: data.petCoinsSendQoq
          }
        },
        {
          top:
          {
            title: '礼物收益账户收入',
            value: UnitDispose((Number(data. giftIncomeReceive) /10).toString()),
            explain: "统计周期内，礼物账户收入合计。",
            yesterday: data.giftIncomeReceiveQoq
          }
        },
        {
          top:
          {
            title: '礼物收益账户支出',
            value: UnitDispose((Number(data. giftIncomeSend) /10).toString()),
            explain: "统计周期内，礼物账户支出合计。",
            yesterday: data.giftIncomeSendQoq
          }
        },
        {
          top:
          {
            title: '宠币充值人数',
            value: UnitDispose(data.petCoinsMemberCount),
            explain: "统计周期内，充值宠币的去重人数。",
            yesterday: data.petCoinsMemberCountQoq
          }
        },
        {
          top:
          {
            title: '宠币充值成功人数',
            value: UnitDispose(data.petCoinsMemberSuccessCount),
            explain: "统计周期内，充值宠币成功的去重人数。",
            yesterday: data.petCoinsMemberSuccessCountQoq
          }
        },
        {
          top:
          {
            title: '礼物赠送人数',
            value: UnitDispose(data.giftSendMemberCount),
            explain: "统计周期内，发送礼物消息的去重人数。",
            yesterday: data.giftSendMemberCountQoq
          }
        },
      ]

      this.setState({ dataSource })
    }
  }
  getChartData = async () => {
    let res = await apiGetLineCharQuery({ "type": this.state.dateType, "startTime": this.state.beginTime, "endTime": this.state.endTime })
    if (res.data && res.code === 0) {
      let data = res.data;
      for(let i = 0; i < data.eventTrendList.length; i++) {
        if(data.eventTrendList[i].name === "PetCurrencyCountExpenditure") {
          data.eventTrendList[i].data = data.eventTrendList[i].data.map(item=>{
            return item = item / 10
          })
        }
      }
      this.setState({
        chartData: {}
      }, () => {
        this.setState({
          chartData: data
        })
      })
    }
  }

  onChange = (dates, dateStrings, type) => {
    if (dates) {
      let beginTime = "";
      let endTime = ""
      let time = ""
      if (type == "4") {
        beginTime = moment(dates).startOf('year').format('YYYY-MM-DD')
        endTime = moment(dates).endOf('year').format('YYYY-MM-DD')
        time = beginTime + '~' + endTime
      }
      if (type == "3") {
        beginTime = moment(dates).startOf('month').format('YYYY-MM-DD')
        endTime = moment(dates).endOf('month').format('YYYY-MM-DD')
        time = beginTime + '~' + endTime
      }
      if (type == "2") {
        beginTime = moment(dates).startOf('week').format('YYYY-MM-DD')
        endTime = moment(dates).endOf('week').format('YYYY-MM-DD')
        time = beginTime + '~' + endTime
      }
      if (type == "1") {
        beginTime = dateStrings
        endTime = dateStrings
        time = beginTime
      }
      if (type == "maybe") {
        beginTime = dateStrings[0]
        endTime = dateStrings[1]
        time = beginTime + "~" + endTime
      }
      this.setState({
        beginTime: beginTime,
        endTime: endTime,
        dateType: type == "maybe" ? "1" : type,
        time: time
      }, () => {
        this.getData();
        this.getChartData()
      })
    } else {
    }
  };
  open = (a) => {
    this.setState({
      defaultValueTime: null
    })
  }
  setQuery = (params) => {
    this.setState({
      selected: params
    })
  }
  disabledDate = (current) => {
    return current && current > moment().startOf('');
    // return current && current > moment().startOf('day');
  };
  changeName = (name) => {
    let chartName = ""
    switch (name) {
      case "RechargeAmount":
        chartName = "充值金额";
        return chartName;
      case "PetCurrencyCountExpenditure":
        chartName = "宠币账户支出";
        return chartName;
      case "GiftIncomeAccountExpenses":
        chartName = '礼物收益账户支出';
        return chartName;
      case "NumberPetCoinsRecharge":
        chartName = "宠币充值人数";
        return chartName;
      case "NumberSuccessfulPetCurrencyRecharge":
        chartName = "宠币充值成功人数";
        return chartName;
      case "GiftGivers":
        chartName = "礼物赠送人数";
        return chartName;
    }
  }
  render() {
    const { dataSource, time, chartData, defaultValueTime } = this.state
    return <div className={"p-layout-box configuration"}>
      <p className="realTitle">概览数据 <span>统计时间：{time}</span></p>
      <div className="realTime">
        <div className="searchBtn">
          <div className="box" id="area">
            <Button type="primary">年</Button>
            <DatePicker getPopupContainer={() => document.getElementById('area')} allowClear={false} onOpenChange={this.open} picker="year" value={defaultValueTime} onChange={(a, b) => this.onChange(a, b, "4")} className="dateBtn"  ></DatePicker>
          </div>
          <div className="box" id="area">
            <Button type="primary">月</Button>
            <DatePicker getPopupContainer={() => document.getElementById('area')} allowClear={false} onOpenChange={this.open} format={'YYYY-MM'} value={defaultValueTime} picker="month" onChange={(a, b) => this.onChange(a, b, "3")} className="dateBtn"  ></DatePicker>
          </div>
          <div className="box" id="area">
            <Button type="primary" >周</Button>
            <DatePicker getPopupContainer={() => document.getElementById('area')} allowClear={false} onOpenChange={this.open} value={defaultValueTime} picker="week" onChange={(a, b) => this.onChange(a, b, "2")} className="dateBtn"  ></DatePicker>
          </div>
          <div className="box" id="area">
            <Button type="primary" >日</Button>
            <DatePicker disabledDate={this.disabledDate} getPopupContainer={() => document.getElementById('area')} allowClear={false} onOpenChange={this.open} format={'YYYY-MM-DD'} value={defaultValueTime} onChange={(a, b) => this.onChange(a, b, "1")} className="dateBtn"  ></DatePicker>
          </div>
        </div>
      </div>
      <div className="card-box">
        {
          dataSource.map((v, i) => {
            return <Card key={i} top={v.top} nowData={v.top.nowData} />
          })
        }
      </div>
      <div style={{ marginTop: 30, fontWeight: 700, fontSize: 22 }}>指标趋势</div>
      <OnlineIncome data={chartData} name="dataBoard" setQuery={this.setQuery} changeName={this.changeName} style={{ overflow: 'auto' }} height={'500px'} width={'100%'} />
    </div>
  }
}

export default Index;
